import "./index.css"
import "../../style/index.css"
import * as echarts from "echarts"
export default {
    template:`
    <div class="dataSetPageBox wh-100">
        <div class="dataSetPage-left flex-1"> 
            <div class="dataSetPage-left-1 center"> 数据集1</div>
            <div class="dataSetPage-left-2 wh-100"> </div>
        </div>
        <div class="dataSetPage-right flex-1">
            <div class="dataSetPage-right-1 center"> 数据集2</div>
            <div class="dataSetPage-right-2 wh-100"> </div>
        </div>
    </div>
    `,
    echartsDataSet1:null,
    initDataSet(){
        var chartDom = document.querySelector('.dataSetPage-left .dataSetPage-left-2');
        this.echartsDataSet1 = echarts.init(chartDom);
        
        const option = {
          dataset: {
            source: [
              ['score', 'amount', 'product'],
              [100, 60000, 'Matcha Latte'],
              [57.1, 78254, 'Milk Tea'],
              [74.4, 41032, 'Cheese Cocoa'],
              [50.1, 12755, 'Cheese Brownie'],
              [89.7, 20145, 'Matcha Cocoa'],
              [68.1, 79146, 'Tea'],
              [19.6, 91852, 'Orange Juice'],
              [10.6, 101852, 'Lemon Juice'],
              [32.7, 20112, 'Walnut Brownie']
            ]
          },
          grid: { containLabel: true },
          xAxis: { name: 'amount' },
          yAxis: { type: 'category' },
          visualMap: {
            orient: 'horizontal',
            left: 'center',
            min: 10,
            max: 100,
            text: ['High Score', 'Low Score'],
            // Map the score column to color
            dimension: 0,
            inRange: {
              color: ['#65B581', '#FFCE34', '#FD665F']
            }
          },
          series: [
            {
              type: 'bar',
              encode: {
                // Map the "amount" column to X axis.
                x: 'amount',
                // Map the "product" column to Y axis
                y: 'product'
              }
            }
          ]
        };
        
        this.echartsDataSet1.setOption(option);
        
    },
    mounted(){
        this.initDataSet();
    },
    destroyed() {
        this.echartsDataSet1.dispose();
      }

}